<template>
  <div class="relayViewArea" ref="relayViewArea" @touchstart="stopMove()" @touchend="start()">
    <div class="bacArea">
        <div class="relay_list" ref="bacArea" id="bacArea" >
          <div class="imagList" v-for="(item,index) in relayData.settings.part_images">
<!--            <img class="viewImg" :src="item.image" alt="">-->
            <image class="viewImg" :mode="'widthFix'" :src="item.image"></image>
            <image class="shadowImg" :mode="'widthFix'" src="../../static/relay/shadowBottom.png" v-if="(index == relayData.settings.part_images.length -1) "></image>
            <div class="nextTep" :class="{nextStepShu:relayData.settings.theme_bar_direction==1}" @click="goNext('sign')" v-if="(index == relayData.settings.part_images.length -1) ">
              <img :src="relayData.settings.theme_next_button" alt="">

            </div>
            <!--<div class="goLeft" v-if="(0 == index) ">
              <img src="../../static/relay/left.png" alt="">
            </div>-->
          </div>
          <!--            <img src="../../static/relay/demo2.png" alt="">
                      <img src="../../static/relay/demo3.png" alt="">
                      <img src="../../static/relay/demo4.png" alt="">
                      <img src="../../static/relay/demo5.png" alt="">
                      <img src="../../static/relay/demo6.png" alt="">
                      <img src="../../static/relay/demo7.png" alt="">-->

        </div>

<!--        <div class="huaArea" id="huaArea" ref="huaArea" :class="{'huaAreaBottom':relayData.settings.theme_bar_direction==1}">
          <img :src="relayData.settings.theme_progress_bar" alt="">
        </div>-->
<!--        <div class="huaArea" id="huaArea" ref="huaArea">
          <img :src="relayData.settings.theme_progress_bar" alt="">
        </div>-->
        <div class="huaArea" id="huaArea" ref="huaArea" :style="{bottom:'-'+(topHeight-50)+'px'}" v-if="relayData.settings.theme_bar_direction==1">
          <image style="width: 85rpx" @load="getImgHeight" :mode="'widthFix'" :src="relayData.settings.theme_progress_bar" alt=""></image>
        </div>
        <div class="huaArea" id="huaArea" ref="huaArea" :style="{top:'-'+(topHeight-50)+'px'}" v-if="relayData.settings.theme_bar_direction==0">
          <image style="width: 85rpx" @load="getImgHeight" :mode="'widthFix'" :src="relayData.settings.theme_progress_bar" alt=""></image>
        </div>
      </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "relay",
  data() {
    return {
      scrollTimer: null, // 滚动定时器
      pauseTimer: null, // 暂停定时器
      scrollId: 'bacArea', // 滚动容器id
      scrollDirection: 'down' ,// 滚动方向 up向上 down向下




      imgList: [],
      scrollHeight:0,
      clientHeight:0,
      scrollTop:0,
      scroll:0,
      topHeight:0,
    }
  },
  props:{
    relayData:{
      type:Object,
      default: {}
    },
  },
  destroyed() {
    // 清理定时器
    clearTimeout(this.pauseTimer)
    this.pauseTimer = null
    clearInterval(this.scrollTimer)
    this.scrollTimer = null
    // 清理点击监听
    window.document.removeEventListener('click', this.pauseScroll)
  },

  computed:{
    ...mapState({
      basicData: state => state.basicData,
      startMove: state => state.startMove
    })
  },
  methods: {
    getImgHeight(e){

      this.topHeight = this.$refs.huaArea.offsetHeight
      let _this = this
      uni.getSystemInfo({
        success(res) {
          let pix = res.windowWidth / 750
          //10右边间距
          // 这里监控
          /*this.onWindowSizeChanged();*/
          /*_this.$refs.relayViewArea.style.setProperty('--height', (1200 * pix * length - 550 * pix) + 'px');*/
          if(1 != _this.relayData.settings.theme_bar_direction){
            document.getElementById('huaArea').animate(
                {top:(res.windowHeight-_this.topHeight) + 'px'},
                {
                  duration: 155000,  //  动画时长  (单位毫秒)
                  easing:'linear',        // 平滑
                  iterations: 1,
                  fill:'forwards'//  重复次数  （无限循环：Infinity）

                }
            )
          }
          else{
            document.getElementById('huaArea').animate(
                {bottom:(res.windowHeight-_this.topHeight) + 'px'},
                {
                  duration: 155000,  //  动画时长  (单位毫秒)
                  easing:'linear',        // 平滑
                  iterations: 1,
                  fill:'forwards'//  重复次数  （无限循环：Infinity）

                }
            )
          }

        }
      })
    },
    scrollStop(event){
      console.info(event.detail)
      clearInterval(this.scrollTimer)
      this.scrollTimer = null
    },
    stopMove(){
      clearInterval(this.scrollTimer)
      this.scrollTimer = null
    },
    start(){
      console.info("????????")
      setTimeout(() => {
        console.info(this.startMove)
        if(!this.startMove){
          this.autoScroll()
        }
      }, 3000)



    },

    init() {
      /*this.forceScreenHandel();*/
      /*this.imgList =this.relayData.settings.part_images*/
      let length = this.relayData.settings.part_images.length
      let _this = this
      _this.$nextTick(() => {

        console.info(document.getElementsByClassName("imagList"))
        let imgArea = document.getElementsByClassName("imagList")
        let height = 0
        for(let i =0;i<imgArea.length;i++){

        }
      })
      let web = uni.getStorageSync('WEB') || null
      if(!web){
        this.dataCompleteFun()
      }
      /*this.dataCompleteFun()*/
    },
    forceScreenHandel() {
      const body = document.getElementsByTagName('body')[0]
      const html = document.getElementsByTagName('html')[0]
      const width = html.clientWidth
      const height = html.clientHeight
      const max = width > height ? width : height
      const min = width > height ? height : width
      body.style.width = max + 'rpx'
      body.style.height = min + 'rpx'
    },
    goNext(type){
      this.$emit('stepChange',type)
    },

    // 数据加载完成方法
    dataCompleteFun() {
      // 开启滚动
      this.autoScroll()
    },
    autoScroll() {
      let _this = this
      uni.getSystemInfo({
        success(res) {
          const scrollHeight = document.getElementById(_this.scrollId).height
          const clientHeight = res.windowHeight
          _this.scrollHeight = scrollHeight
          _this.clientHeight = clientHeight
          _this.scrollTop = window.pageYOffset
          this.scroll = scrollHeight
          /*const clientHeight = uni.getSystemInfo()*/
          /*console.info(clientHeight)
          const scroll = scrollHeight - clientHeight*/
          // 滚动长度为0
          if (this.scroll === 0) {
            return
          }
          // 触发滚动方法
          _this.scrollFun()
         /* // 去除点击监听
          window.document.removeEventListener('click', _this.pauseScroll)
          // 重设点击监听
          window.document.addEventListener('click', _this.pauseScroll, false)*/
        }
      })

    },
    pauseScroll() {
      // 定时器不为空
      if (this.scrollTimer) {
        // 清除定时器
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
        // 一秒钟后重新开始定时器
        this.pauseTimer = setTimeout(() => {
          this.scrollFun()
        }, 2000)
      }
    },
    scrollFun() {
      // 如果定时器存在
      if (this.scrollTimer) {
        // 则先清除
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
      }
      this.scrollTimer = setInterval(() => {
        /*const scrollHeight = document.getElementById(this.scrollId).scrollHeight
        const clientHeight = document.getElementById(this.scrollId).clientHeight*/
        // 获取当前滚动条距离顶部高度
        // 向下滚动
        if (this.scrollDirection === 'down') {
          this.scrollTop = this.scrollTop + 3
          let temp = this.scrollTop
          uni.pageScrollTo({
            scrollTop: temp,
            duration: 30
          })
          /*document.getElementById(this.scrollId).scrollTop = temp // 滚动
          console.info(document.getElementById(this.scrollId).scrollTop)*/
          // 距离顶部高度  大于等于 滚动长度

          const scroll = this.scrollHeight
          if (scroll <= temp) {
            // 滚动到底部 停止定时器
            clearInterval(this.scrollTimer)
            this.scrollTimer = null
            // 改变方向
            /*this.scrollDirection = 'up'
            // 一秒后重开定时器
            setTimeout(() => {
              this.scrollFun()
            }, 1000)*/
          }
          // 向上滚动
        } /*else if (this.scrollDirection === 'up') {
          const temp = this.scrollTop - 0.5
          this.scrollTop = temp // 滚动
          // 距离顶部高度  小于等于 0
          if (temp <= 0) {
            // 滚动到底部 停止定时器
            clearInterval(this.scrollTimer)
            this.scrollTimer = null
            // 改变方向
            this.scrollDirection = 'down'
            // 一秒后重开定时器
            setTimeout(() => {
              this.scrollFun()
            }, 1000)
          }
        }*/
      }, 50)
    }
  },
  mounted() {
    this.init()
    console.info(this.startMove)
  },
}
</script>

<style scoped lang="scss">
@import 'scss/relay.scss';
/*page{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto !important;
}*/

body {
  /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/*横竖屏判断，可能用得到*/
/*竖屏*/
@media screen and(orientation: portrait) {
  .relayViewArea {
    position: relative;
    width: 100%;
    height: auto;
    /*top: 0;
    left: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: 0% 0%;*/
  }
}

/*横屏*/
@media screen and(orientation: landscape) {
  /*.relayViewArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }*/
}


.relayViewArea {
  position: relative;
  width: 100%;
  height: auto;
  overflow-x: hidden;
  /*top: 0;
  left: 100vw;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  transform-origin: 0% 0%;*/
}

.bacArea {
  height: 100%;
  background-size: 100% 100%;
  position: relative;
  .relay_list {
    width: 100%;
    overflow-x: auto;
    display: flex;
    height: 100%;
    justify-items: center;
    position: relative;
    flex-direction: column;
    .imagList{
      /*min-width: 1600rpx;*/
      /*min-height: 400rpx;*/
      width:100%;
      position: relative;
      .viewImg {
        width: 100%;
        overflow-x: hidden;
        display: block;
      }
      .shadowImg{
        position: absolute;
        bottom: 0;
        width: 100%;
      }
    }

  }
}

.huaArea {
  position: fixed;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /*animation: sport 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;*/
  img{
    width: 100%;
    height: 100%;
  }
}
.huaAreaBottom{
  /*bottom: -450rpx;*/
}
@keyframes sport {

  100% {
    top: 100%;
  }

}
.goLeft{
  width: 200rpx;
  height: 40rpx;
  /*background: url('../../static/relay/train.png') no-repeat center;*/
  position: absolute;
  bottom: -90rpx;
  left: calc(50% - 100rpx);

  z-index: 999;
  /*transform-origin: 0% 0%;*/
  /*transform: translateX(-50%,-50%);*/
  animation: jelly90 1s infinite;
  img{
    width: 100%;
    height: 100%;
  }
}
.nextTep{
  width: 200rpx;
  height: 100rpx;
  /*background: url('../../static/relay/train.png') no-repeat center;*/
  position: absolute;
  bottom: calc(19% - 50rpx);
  left: calc(50% - 100rpx);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  animation: jelly90 1s infinite;
  /*transform-origin: 0% 0%;*/
  /*transform: translateX(-50%,-50%);*/
  img{
    width: 100%;
    height: 100%;
  }
}
.nextStepShu{
    width: 200rpx;
    height: 100rpx;
    /*background: url('../../static/relay/train.png') no-repeat center;*/
    position: absolute;
    bottom: calc(19% - 50rpx);
    left: calc(50% - 100rpx);
    animation: jelly 1s infinite;
    /*transform-origin: 0% 0%;*/
    /*transform: translateX(-50%,-50%);*/
    img{
        width: 100%;
        height: 100%;
    }
}

</style>